<template>
  <div class="chart-display-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计报表</el-breadcrumb-item>
      <el-breadcrumb-item>图表展示</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 顶部控制区域 -->
    <div class="control-panel">
      <el-row :gutter="20" justify="space-between" align="middle">
        <el-col :span="16">
          <el-space wrap>
            <!-- 时间范围选择 -->
            <el-select v-model="timeRange" placeholder="选择时间范围" @change="handleTimeRangeChange">
              <el-option label="最近7天" value="7days" />
              <el-option label="最近30天" value="30days" />
              <el-option label="最近90天" value="90days" />
              <el-option label="本学期" value="semester" />
              <el-option label="自定义" value="custom" />
            </el-select>

            <!-- 自定义时间选择器 -->
            <el-date-picker
              v-if="timeRange === 'custom'"
              v-model="customDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleCustomDateChange"
            />

            <!-- 数据类型筛选 -->
            <el-select v-model="dataType" placeholder="选择数据类型" @change="handleDataTypeChange">
              <el-option label="全部数据" value="all" />
              <el-option label="报名统计" value="enrollment" />
              <el-option label="成绩统计" value="score" />
              <el-option label="项目统计" value="project" />
              <el-option label="奖牌统计" value="medal" />
              <el-option label="用户统计" value="user" />
            </el-select>

            <!-- 刷新按钮 -->
            <el-button type="primary" :icon="Refresh" @click="refreshData" :loading="refreshing">
              刷新数据
            </el-button>
          </el-space>
        </el-col>
        <el-col :span="8" class="text-right">
          <el-space>
            <!-- 布局模式切换 -->
            <el-button-group>
              <el-button
                :type="layoutMode === 'grid' ? 'primary' : 'default'"
                @click="layoutMode = 'grid'"
              >
                网格布局
              </el-button>
              <el-button
                :type="layoutMode === 'flex' ? 'primary' : 'default'"
                @click="layoutMode = 'flex'"
              >
                流式布局
              </el-button>
            </el-button-group>

            <!-- 全屏按钮 -->
            <el-button :icon="FullScreen" @click="toggleFullScreen">
              {{ isFullScreen ? '退出全屏' : '全屏显示' }}
            </el-button>

            <!-- 导出按钮 -->
            <el-dropdown @command="handleExport">
              <el-button :icon="Download">
                导出图表<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="png">导出为PNG</el-dropdown-item>
                  <el-dropdown-item command="pdf">导出为PDF</el-dropdown-item>
                  <el-dropdown-item command="excel">导出为Excel</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content" :class="{ 'full-screen': isFullScreen }">
      <!-- 侧边栏配置区域 -->
      <div class="sidebar" v-show="showSidebar">
        <el-card class="config-card">
          <template #header>
            <div class="card-header">
              <span>图表配置</span>
              <el-button :icon="Close" @click="showSidebar = false" text />
            </div>
          </template>

          <!-- 图表类型选择 -->
          <div class="config-section">
            <h4>图表类型</h4>
            <el-checkbox-group v-model="selectedChartTypes" @change="handleChartTypeChange">
              <el-checkbox label="line">折线图</el-checkbox>
              <el-checkbox label="bar">柱状图</el-checkbox>
              <el-checkbox label="pie">饼图</el-checkbox>
              <el-checkbox label="radar">雷达图</el-checkbox>
              <el-checkbox label="scatter">散点图</el-checkbox>
              <el-checkbox label="gauge">仪表盘</el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 自动刷新设置 -->
          <div class="config-section">
            <h4>自动刷新</h4>
            <el-switch
              v-model="autoRefresh"
              active-text="开启"
              inactive-text="关闭"
              @change="handleAutoRefreshChange"
            />
            <el-select v-model="refreshInterval" v-if="autoRefresh" @change="handleRefreshIntervalChange">
              <el-option label="10秒" :value="10000" />
              <el-option label="30秒" :value="30000" />
              <el-option label="1分钟" :value="60000" />
              <el-option label="5分钟" :value="300000" />
            </el-select>
          </div>

          <!-- 主题设置 -->
          <div class="config-section">
            <h4>主题设置</h4>
            <el-radio-group v-model="chartTheme" @change="handleThemeChange">
              <el-radio label="default">默认主题</el-radio>
              <el-radio label="dark">深色主题</el-radio>
              <el-radio label="light">浅色主题</el-radio>
            </el-radio-group>
          </div>

          <!-- 图表动画 -->
          <div class="config-section">
            <h4>动画效果</h4>
            <el-switch
              v-model="enableAnimation"
              active-text="开启"
              inactive-text="关闭"
              @change="handleAnimationChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 图表展示区域 -->
      <div class="chart-container" :class="layoutMode">
        <!-- 综合仪表盘 -->
        <el-row :gutter="20" class="dashboard-row">
          <el-col :span="6" v-for="metric in dashboardMetrics" :key="metric.key">
            <el-card class="metric-card" shadow="hover">
              <div class="metric-content">
                <div class="metric-icon" :style="{ backgroundColor: metric.color }">
                  <el-icon :size="24"><component :is="metric.icon" /></el-icon>
                </div>
                <div class="metric-info">
                  <div class="metric-title">{{ metric.title }}</div>
                  <div class="metric-value">{{ metric.value }}</div>
                  <div class="metric-trend" :class="metric.trend > 0 ? 'up' : 'down'">
                    <el-icon><ArrowUp v-if="metric.trend > 0" /><ArrowDown v-else /></el-icon>
                    {{ Math.abs(metric.trend) }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 可拖拽图表网格 -->
        <el-row :gutter="20" class="charts-grid">
          <el-col
            :span="chart.span"
            v-for="chart in visibleCharts"
            :key="chart.id"
            class="chart-item"
            draggable="true"
            @dragstart="handleDragStart($event, chart)"
            @dragover="handleDragOver"
            @drop="handleDrop($event, chart)"
          >
            <el-card class="chart-card" shadow="hover">
              <template #header>
                <div class="chart-header">
                  <span>{{ chart.title }}</span>
                  <el-dropdown @command="(command) => handleChartAction(command, chart)">
                    <el-button :icon="MoreFilled" text />
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="fullscreen">全屏</el-dropdown-item>
                        <el-dropdown-item command="refresh">刷新</el-dropdown-item>
                        <el-dropdown-item command="edit">编辑</el-dropdown-item>
                        <el-dropdown-item command="hide">隐藏</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>

              <div class="chart-content" :ref="chart.id" :id="chart.id"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 配置按钮 -->
      <el-button
        class="config-toggle"
        :icon="Setting"
        circle
        @click="showSidebar = !showSidebar"
        v-show="!showSidebar"
      />
    </div>

    <!-- 全屏图表对话框 -->
    <el-dialog
      v-model="showFullScreenChart"
      title="图表全屏显示"
      width="90%"
      :before-close="handleCloseFullScreen"
      destroy-on-close
    >
      <div class="fullscreen-chart" :ref="fullScreenChartId" :id="fullScreenChartId"></div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import {
  Refresh,
  FullScreen,
  Download,
  ArrowDown,
  Close,
  Setting,
  MoreFilled,
  ArrowUp
} from '@element-plus/icons-vue'

// 导入API
import {
  getEnrollmentTrendChart,
  getProjectDistributionChart,
  getScoreComparisonChart,
  getMedalRankingChart,
  getUserActivityChart,
  getDashboardData,
  getRealTimeStats
} from '@/api/statistics'

export default {
  name: 'ChartDisplay',
  components: {
    Refresh,
    FullScreen,
    Download,
    ArrowDown,
    Close,
    Setting,
    MoreFilled,
    ArrowUp
  },
  setup() {
    // 响应式数据
    const timeRange = ref('30days')
    const customDateRange = ref([])
    const dataType = ref('all')
    const refreshing = ref(false)
    const isFullScreen = ref(false)
    const showSidebar = ref(true)
    const layoutMode = ref('grid')
    const selectedChartTypes = ref(['line', 'bar', 'pie', 'radar'])
    const autoRefresh = ref(true)
    const refreshInterval = ref(30000)
    const chartTheme = ref('default')
    const enableAnimation = ref(true)
    const showFullScreenChart = ref(false)
    const fullScreenChartId = ref('')

    // 图表实例存储
    const chartInstances = reactive({})
    let refreshTimer = null

    // 仪表盘指标数据
    const dashboardMetrics = reactive([
      {
        key: 'enrollments',
        title: '总报名人数',
        value: '1,234',
        trend: 12.5,
        color: '#409EFF',
        icon: 'ArrowUp'
      },
      {
        key: 'projects',
        title: '比赛项目',
        value: '45',
        trend: 8.2,
        color: '#67C23A',
        icon: 'ArrowUp'
      },
      {
        key: 'scores',
        title: '成绩记录',
        value: '3,456',
        trend: -3.1,
        color: '#E6A23C',
        icon: 'ArrowUp'
      },
      {
        key: 'medals',
        title: '奖牌总数',
        value: '234',
        trend: 15.7,
        color: '#F56C6C',
        icon: 'ArrowUp'
      }
    ])

    // 图表配置
    const chartConfigs = reactive([
      {
        id: 'enrollment-trend',
        title: '报名趋势图',
        type: 'line',
        span: 12,
        visible: true,
        api: getEnrollmentTrendChart,
        option: null
      },
      {
        id: 'project-distribution',
        title: '项目分布',
        type: 'pie',
        span: 12,
        visible: true,
        api: getProjectDistributionChart,
        option: null
      },
      {
        id: 'score-comparison',
        title: '成绩对比',
        type: 'bar',
        span: 12,
        visible: true,
        api: getScoreComparisonChart,
        option: null
      },
      {
        id: 'medal-ranking',
        title: '奖牌排行榜',
        type: 'bar',
        span: 12,
        visible: true,
        api: getMedalRankingChart,
        option: null
      },
      {
        id: 'user-activity',
        title: '用户活跃度',
        type: 'radar',
        span: 12,
        visible: true,
        api: getUserActivityChart,
        option: null
      },
      {
        id: 'realtime-stats',
        title: '实时统计',
        type: 'gauge',
        span: 12,
        visible: true,
        api: getRealTimeStats,
        option: null
      }
    ])

    // 计算属性
    const visibleCharts = computed(() => {
      return chartConfigs.filter(chart =>
        chart.visible && selectedChartTypes.value.includes(chart.type)
      )
    })

    // 初始化图表
    const initCharts = async () => {
      await nextTick()

      visibleCharts.value.forEach(chart => {
        const dom = document.getElementById(chart.id)
        if (dom) {
          // 销毁已存在的图表实例
          if (chartInstances[chart.id]) {
            chartInstances[chart.id].dispose()
          }

          // 创建新图表实例
          chartInstances[chart.id] = echarts.init(dom, chartTheme.value)
          loadChartData(chart)
        }
      })
    }

    // 加载图表数据
    const loadChartData = async (chart) => {
      try {
        refreshing.value = true
        const params = {
          timeRange: timeRange.value,
          dataType: dataType.value
        }

        const response = await chart.api(params)
        const option = generateChartOption(chart.type, response.data)

        if (chartInstances[chart.id]) {
          chartInstances[chart.id].setOption(option, true)
        }

        chart.option = option
      } catch (error) {
        console.error('加载图表数据失败:', error)
        ElMessage.error('加载图表数据失败')
      } finally {
        refreshing.value = false
      }
    }

    // 生成图表配置项
    const generateChartOption = (type, data) => {
      const baseOption = {
        animation: enableAnimation.value,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          borderColor: 'transparent',
          textStyle: { color: '#fff' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      }

      switch (type) {
        case 'line':
          return {
            ...baseOption,
            xAxis: {
              type: 'category',
              data: data.dates || []
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.values || [],
              type: 'line',
              smooth: true,
              areaStyle: {
                opacity: 0.3
              }
            }]
          }

        case 'bar':
          return {
            ...baseOption,
            xAxis: {
              type: 'category',
              data: data.categories || []
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.values || [],
              type: 'bar',
              barWidth: '60%',
              itemStyle: {
                borderRadius: [4, 4, 0, 0]
              }
            }]
          }

        case 'pie':
          return {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [{
              name: '分布',
              type: 'pie',
              radius: '50%',
              data: data.data || [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          }

        case 'radar':
          return {
            tooltip: {},
            legend: {
              data: data.legend || []
            },
            radar: {
              indicator: data.indicator || []
            },
            series: [{
              name: '数据统计',
              type: 'radar',
              data: data.series || []
            }]
          }

        case 'gauge':
          return {
            series: [{
              name: '实时指标',
              type: 'gauge',
              detail: {
                formatter: '{value}%'
              },
              data: data.data || [{ value: 0, name: '完成率' }]
            }]
          }

        default:
          return baseOption
      }
    }

    // 加载仪表盘数据
    const loadDashboardData = async () => {
      try {
        const response = await getDashboardData({
          widgets: ['enrollments', 'projects', 'scores', 'medals'],
          filters: {
            timeRange: timeRange.value,
            dataType: dataType.value
          }
        })

        if (response.data) {
          dashboardMetrics.forEach((metric) => {
            if (response.data[metric.key]) {
              metric.value = response.data[metric.key].value
              metric.trend = response.data[metric.key].trend
            }
          })
        }
      } catch (error) {
        console.error('加载仪表盘数据失败:', error)
      }
    }

    // 刷新所有数据
    const refreshData = async () => {
      await loadDashboardData()
      await Promise.all(visibleCharts.value.map(chart => loadChartData(chart)))
      ElMessage.success('数据刷新成功')
    }

    // 处理时间范围变化
    const handleTimeRangeChange = () => {
      refreshData()
    }

    // 处理自定义日期变化
    const handleCustomDateChange = () => {
      if (customDateRange.value && customDateRange.value.length === 2) {
        refreshData()
      }
    }

    // 处理数据类型变化
    const handleDataTypeChange = () => {
      refreshData()
    }

    // 处理图表类型变化
    const handleChartTypeChange = () => {
      initCharts()
    }

    // 处理自动刷新变化
    const handleAutoRefreshChange = (value) => {
      if (value) {
        startAutoRefresh()
      } else {
        stopAutoRefresh()
      }
    }

    // 处理刷新间隔变化
    const handleRefreshIntervalChange = () => {
      if (autoRefresh.value) {
        stopAutoRefresh()
        startAutoRefresh()
      }
    }

    // 处理主题变化
    const handleThemeChange = () => {
      initCharts()
    }

    // 处理动画变化
    const handleAnimationChange = () => {
      visibleCharts.value.forEach(chart => {
        if (chartInstances[chart.id] && chart.option) {
          chart.option.animation = enableAnimation.value
          chartInstances[chart.id].setOption(chart.option)
        }
      })
    }

    // 开始自动刷新
    const startAutoRefresh = () => {
      stopAutoRefresh()
      refreshTimer = setInterval(() => {
        refreshData()
      }, refreshInterval.value)
    }

    // 停止自动刷新
    const stopAutoRefresh = () => {
      if (refreshTimer) {
        clearInterval(refreshTimer)
        refreshTimer = null
      }
    }

    // 切换全屏
    const toggleFullScreen = () => {
      isFullScreen.value = !isFullScreen.value
      setTimeout(() => {
        Object.values(chartInstances).forEach(chart => {
          chart && chart.resize()
        })
      }, 100)
    }

    // 处理图表操作
    const handleChartAction = (command, chart) => {
      switch (command) {
        case 'fullscreen':
          showChartFullScreen(chart)
          break
        case 'refresh':
          loadChartData(chart)
          break
        case 'edit':
          ElMessage.info('编辑功能开发中...')
          break
        case 'hide':
          chart.visible = false
          initCharts()
          break
      }
    }

    // 显示图表全屏
    const showChartFullScreen = (chart) => {
      fullScreenChartId.value = `fullscreen-${chart.id}`
      showFullScreenChart.value = true

      nextTick(() => {
        const dom = document.getElementById(fullScreenChartId.value)
        if (dom && chartInstances[chart.id]) {
          const fullScreenChart = echarts.init(dom, chartTheme.value)
          fullScreenChart.setOption(chart.option)
        }
      })
    }

    // 关闭全屏
    const handleCloseFullScreen = () => {
      showFullScreenChart.value = false
      fullScreenChartId.value = ''
    }

    // 处理导出
    const handleExport = (command) => {
      ElMessage.info(`导出为${command.toUpperCase()}格式功能开发中...`)
    }

    // 拖拽相关方法
    const handleDragStart = (event, chart) => {
      event.dataTransfer.setData('chartId', chart.id)
      event.dataTransfer.effectAllowed = 'move'
    }

    const handleDragOver = (event) => {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    }

    const handleDrop = (event, targetChart) => {
      event.preventDefault()
      const sourceChartId = event.dataTransfer.getData('chartId')
      const sourceChart = chartConfigs.find(c => c.id === sourceChartId)
      const targetChartIndex = chartConfigs.findIndex(c => c.id === targetChart.id)

      if (sourceChart && sourceChart.id !== targetChart.id) {
        const sourceIndex = chartConfigs.findIndex(c => c.id === sourceChart.id)
        chartConfigs.splice(sourceIndex, 1)
        chartConfigs.splice(targetChartIndex, 0, sourceChart)
        initCharts()
      }
    }

    // 窗口大小变化处理
    const handleResize = () => {
      Object.values(chartInstances).forEach(chart => {
        chart && chart.resize()
      })
    }

    // 生命周期
    onMounted(() => {
      initCharts()
      loadDashboardData()

      if (autoRefresh.value) {
        startAutoRefresh()
      }

      window.addEventListener('resize', handleResize)
    })

    onBeforeUnmount(() => {
      stopAutoRefresh()

      // 销毁所有图表实例
      Object.values(chartInstances).forEach(chart => {
        chart && chart.dispose()
      })

      window.removeEventListener('resize', handleResize)
    })

    return {
      // 响应式数据
      timeRange,
      customDateRange,
      dataType,
      refreshing,
      isFullScreen,
      showSidebar,
      layoutMode,
      selectedChartTypes,
      autoRefresh,
      refreshInterval,
      chartTheme,
      enableAnimation,
      showFullScreenChart,
      fullScreenChartId,
      dashboardMetrics,
      visibleCharts,

      // 方法
      refreshData,
      handleTimeRangeChange,
      handleCustomDateChange,
      handleDataTypeChange,
      handleChartTypeChange,
      handleAutoRefreshChange,
      handleRefreshIntervalChange,
      handleThemeChange,
      handleAnimationChange,
      toggleFullScreen,
      handleChartAction,
      handleCloseFullScreen,
      handleExport,
      handleDragStart,
      handleDragOver,
      handleDrop
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-display-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .control-panel {
    background: white;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

    .text-right {
      text-align: right;
    }
  }

  .main-content {
    position: relative;
    transition: all 0.3s ease;

    &.full-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      background: white;
      padding: 20px;
    }

    .sidebar {
      position: absolute;
      right: 0;
      top: 0;
      width: 280px;
      height: 100%;
      z-index: 100;
      transition: transform 0.3s ease;

      .config-card {
        height: 100%;
        overflow-y: auto;

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .config-section {
          margin-bottom: 20px;

          h4 {
            margin-bottom: 10px;
            color: #303133;
            font-size: 14px;
            font-weight: 600;
          }

          .el-checkbox-group,
          .el-radio-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }

          .el-select {
            margin-top: 10px;
            width: 100%;
          }
        }
      }
    }

    .chart-container {
      margin-right: 300px;
      transition: margin-right 0.3s ease;

      &.flex {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .chart-item {
          flex: 1 1 calc(50% - 20px);
          min-width: 400px;
        }
      }

      .dashboard-row {
        margin-bottom: 20px;

        .metric-card {
          height: 120px;

          .metric-content {
            display: flex;
            align-items: center;
            height: 100%;

            .metric-icon {
              width: 60px;
              height: 60px;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 16px;
              color: white;
            }

            .metric-info {
              flex: 1;

              .metric-title {
                font-size: 14px;
                color: #909399;
                margin-bottom: 8px;
              }

              .metric-value {
                font-size: 24px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 4px;
              }

              .metric-trend {
                font-size: 12px;
                display: flex;
                align-items: center;
                gap: 2px;

                &.up {
                  color: #67C23A;
                }

                &.down {
                  color: #F56C6C;
                }
              }
            }
          }
        }
      }

      .charts-grid {
        .chart-item {
          margin-bottom: 20px;
          cursor: move;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          }

          .chart-card {
            height: 400px;

            .chart-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .chart-content {
              height: 320px;
              width: 100%;
            }
          }
        }
      }
    }

    .config-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 100;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  .fullscreen-chart {
    height: 70vh;
    width: 100%;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .chart-display-container {
    .main-content {
      .chart-container {
        margin-right: 0;

        .charts-grid {
          .chart-item {
            .el-col {
              margin-bottom: 20px;
            }
          }
        }
      }

      .sidebar {
        transform: translateX(100%);
      }
    }
  }
}

@media (max-width: 768px) {
  .chart-display-container {
    padding: 10px;

    .control-panel {
      .el-row {
        .el-col {
          &:first-child {
            margin-bottom: 10px;
          }

          &:last-child {
            text-align: left !important;
          }
        }
      }
    }

    .main-content {
      .chart-container {
        .dashboard-row {
          .el-col {
            margin-bottom: 10px;
          }
        }

        .charts-grid {
          .chart-item {
            .chart-card {
              height: 300px;

              .chart-content {
                height: 220px;
              }
            }
          }
        }
      }
    }
  }
}
</style>